<style scoped>
    .article-docker-container {
        padding-top: 46px;
    }

    .article-docker-image {
        width: 100%;
    }
    .article-docker-content {
        width: 96%;
        margin: 0 auto;
    }

    .article-docker-content > h3 {
        display: block;
        margin: 0 auto;
        bottom: 10px;
        word-break: break-all;
        text-align: center;
        padding-bottom: 20px;
    }

</style>

<template>
    <div class="article-docker-container">
        <img class="article-docker-image" :src="article.src" />
        <div class="article-docker-content" >
            <h3>{{article.title}}</h3>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import articleService from 'services/article'

    export default {
        data: () => ({article: {}}),
        route: {
            data: ({to}) => {
                if (!to.query.src || !to.query.title) {
                    return articleService
                        .fetchArticleHeader(to.params.article)
                        .then(({data}) => ({ article: data }));
                } else {
                    return {article: to.query};
                }
            }
        },
    }
</script>
